<!-- 添加文章页面 -->
<template>
    <div>
        <a-card>
            <h4 style="margin-left: 10px; color: #d6a20f; text-align: center">
                {{ id ? "编辑文章" : "写文章" }}
            </h4>
            <a-form-model
                :model="artInfo"
                ref="artInfoRef"
                :rules="artInfoRules"
                :hideRequiredMark="true"
            >
                <!-- 标题 -->
                <a-form-model-item label="文章标题" prop="title">
                    <a-input v-model="artInfo.title"></a-input>
                </a-form-model-item>
                <!-- 分类 -->
                <a-form-model-item label="文章分类" prop="cid">
                    <a-select
                        v-model="artInfo.cid"
                        @change="cateChange"
                        placeholder="请选择分类"
                    >
                        <a-select-option
                            v-for="cate in cateList"
                            :key="cate.id"
                            :value="cate.id"
                        >
                            {{ cate.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <!-- 描述 -->
                <a-form-model-item label="文章描述" prop="desc">
                    <a-textarea v-model="artInfo.desc"></a-textarea>
                </a-form-model-item>
                <!-- 文章内容 -->
                <a-form-model-item label="文章内容" prop="content">
                    <div style="height: 600px">
                        <!-- Markdown编辑器 -->
                        <mavon-editor
                            v-model="artInfo.content"
                            :toolbars="toolbars"
                            :codeStyle="codeStyle"
                            ref="artContentMd"
                            @imgAdd="handleImgAdd"
                            @imgDel="handleImgDel"
                            placeholder="编辑文章内容..."
                            style="height: 100%; z-index: 999; font-size: 16px"
                        />
                    </div>
                </a-form-model-item>
                <!-- 提交 -->
                <a-form-model-item>
                    <a-button
                        type="primary"
                        style="margin: 0 10px 0 0"
                        @click="artSubmit(artInfo.id)"
                    >
                        提交
                    </a-button>
                    <a-button
                        type="danger"
                        style="margin: 0 10px"
                        @click="addCancel()"
                        >取消</a-button
                    >
                </a-form-model-item>
            </a-form-model>
        </a-card>
    </div>
</template>

<script>
export default {
    props: ["id"],
    data() {
        return {
            artInfo: {
                id: 0,
                title: "",
                cid: undefined,
                // flag: '',
                desc: "",
                content: "",
            },
            cateList: [],

            // 表单验证
            artInfoRules: {
                title: [
                    {
                        required: true,
                        message: "请输入文章标题",
                        trigger: "blur",
                    },
                ],
                cid: [
                    {
                        required: true,
                        message: "请选择文章分类",
                        trigger: "change",
                    },
                ],
                flag: [
                    {
                        required: true,
                        message: "请输入文章标记",
                        trigger: "blur",
                    },
                ],
                desc: [
                    {
                        required: true,
                        message: "请选择文章描述",
                        trigger: "blur",
                    },
                    {
                        max: 120,
                        message: "文章描述最多20个字符",
                        trigger: "change",
                    },
                ],
                content: [
                    {
                        required: true,
                        message: "请输入文章内容",
                        trigger: "blur",
                    },
                ],
            },

            // Markdown工具栏配置
            toolbars: {
                bold: true, // 粗体
                italic: true, // 斜体
                header: true, // 标题
                underline: true, // 下划线
                mark: true, // 标记
                superscript: true, // 上角标
                quote: true, // 引用
                ol: true, // 有序列表
                link: true, // 链接
                imagelink: true, // 图片链接
                help: true, // 帮助
                code: true, // code
                subfield: true, // 是否需要分栏
                fullscreen: true, // 全屏编辑
                readmodel: true, // 沉浸式阅读
                undo: true, // 上一步
                redo: true, // 下一步
                trash: true, // 清空
                save: true, // 保存（触发events中的save事件）
                navigation: true, // 导航目录
                alignleft: false, // 左对齐
                aligncenter: false, // 居中
                alignright: false, // 右对齐
                subfield: false, // 单双栏模式
                preview: false, // 预览
            },
            // markdown编辑器代码样式 monokai-sublime
            codeStyle: "atom-one-light", //主题
        };
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getCateList();
        if (this.id) {
            this.getArtInfo(this.id);
        }
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {},
    //方法集
    methods: {
        //查询文章信息
        async getArtInfo(id) {
            const { data: res } = await this.$axios.get(`/article/${id}`);
            if (res.code != 200) {
                return this.$message.error(res.msg);
            }
            this.artInfo = res.data.data;
            this.artInfo.id = res.data.data.id;
        },

        // 获取分类列表
        async getCateList() {
            const { data: res } = await this.$axios.get("categories");
            if (res.code != 200) {
                return this.$message.error(res.msg);
            }
            this.cateList = res.data.data;
        },

        //分类选择
        cateChange(val) {
            this.artInfo.cid = val;
        },

        //提交(更新)文章
        artSubmit(id) {
            this.$refs.artInfoRef.validate(async (valid) => {
                if (id == 0) {
                    //添加文章
                    const { data: res } = await this.$axios.post(
                        "/article/add",
                        this.artInfo
                    );
                    if (res.code != 200) {
                        return this.$message.error(res.msg);
                    }
                    this.$router.push("/artlist");
                    this.$message.success("添加文章成功");
                } else {
                    //更新文章
                    const { data: res } = await this.$axios.put(
                        `/article/${id}`,
                        this.artInfo
                    );
                    if (res.code != 200) {
                        return this.$message.error(res.msg);
                    }
                    this.$router.push("/artlist");
                    this.$message.success("更新文章成功");
                }
            });
        },

        // 取消
        addCancel() {
            this.$refs.artInfoRef.resetFields();
        },

        // Markdown编辑器内容改变
        // change(value, render) {
        //     this.html = render;
        //     this.artInfo.content = value;
        //     this.artInfo.content = render;
        // },

        // 处理Markdown编辑器图片上传
        // handleImgAdd(pos, $file) {
        //     // 第一步.将图片上传到服务器
        //     var formdata = new FormData();
        //     formdata.append("file", $file);
        //     this.$axios
        //         .post("/upload", formdata, {
        //             headers: {
        //                 "Content-Type": "multipart/form-data",
        //             },
        //         })
        //         .then((res) => {
        //             // console.log("res:" , res);
        //             var url = res.data.url;
        //             // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        //             this.$refs.artContentMd.$img2Url(pos, url);
        //         });
        // },

        handleImgAdd(pos, $file) {
            return;
        },

        // 处理Markdown编辑器图片删除
        handleImgDel() {
            return;
            // console.log("处理图片删除");
        },
    },
};
</script>
<style>
</style>